<template>
    <div class="nav">
      <div class="nav-menu-wrapper">
        <div class="chatgpt-box-periphery">
          <div class="chatgpt-box noopen" v-for="item in mainList" :class="{activeNav: item.index == current }" @click="changeMenu(item.index)">
            <div class="chatgpt-type" ></div>
            <div class="chatgpt-box-image">
              <img :src="item.image">
            </div>
            <div class="chatgpt-box-name">
              <span>
                {{item.name}}
              </span>
            </div>
          </div>
        </div>

        <ul class="menu-list ul-box">
          <li class="li-item noopen" v-for="(item,index) in menuList"
              :key="index"
              :class="{activeNav: index == current }"
              @click="changeMenu(index)"
          >
            <div class="block">
              <div class="block-type">
              </div>
            </div>
            <div class="icon-box">
              <div class="icon">
                <i class="fa" :class="item.icon" />
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="user">
        <div class="user-box">
          <div class="user-box-img">
            <chat-user :imgUrl="imgUrl"/>
          </div>
        </div>
        <div class="user-btn" >
          <div class="outbox" @click="outLogin(false)" v-if="user.nickname!==undefined">退出</div>
          <div class=" creatbox" @click="outLogin(true)" v-else>登录</div>
        </div>
      </div>
    </div>
</template>

<script>

import ChatUser from "@/components/chat/chat-user";
export default {
  name: "chat-nav",
  components: {ChatUser},
  data() {
    return {
      mainList:[
        {
          index: -1,
          icon: "icon-chatgpt",
          name: "chatGpt",
          image: require("../../assets/chat/chatgpt-icon-1.png")
        },
        {
          index: -2,
          icon: "Virtualhuman",
          name: "AI虚拟数字人",
          image: require("../../assets/chat/Virtualhuman.png")
        },
      ],

      menuList:[
        {
          icon: "el-icon-chat-dot-round",
          name: "消息",
          image: require("../../assets/chat/news.png")
        },{
          icon: "el-icon-phone",
          name: "联系我们",
          image: require("../../assets/chat/@info.png")
        },{
          icon: "el-icon-more",
          name: "更多内容",
          image: require("../../assets/chat/@info.png")
        }],
      current: this.$store.state.chatCurrent,
      user : {},
      imgUrl: '',
    }
  },
  //计算属性 类似于data概念
  computed: {

  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeMenu(index){
      this.current = index;
      switch (index){
        case -1:
          if(this.user.nickname === undefined){
            this.$message.error('🚫尚未登录请去登录解锁一下功能🚫');
          }else {
            this.$router.push("/chat/chatgpt")
          }

          break;
        case -2:
          if(this.user.nickname === undefined){
            this.$message.error('🚫尚未登录请去登录解锁一下功能🚫');
          }else {
            this.$router.push("/chat/virtualPerson")
          }
          break;
        case 0:
          this.$message.warning("✋暂未开发敬请期待!")
          // this.$router.push("/chat/comment")
          break;
        case 1:
          this.$message.warning("✋暂未开发敬请期待!")
          // this.$router.push("/chat/bell")
          break;
        case 2:
          this.$message.warning("✋暂未开发敬请期待!")
          break;
      }
    },
    outLogin(flag){
      if(flag){
        this.$router.push("/NewLogin");
      }else {
        var that = this;
        this.$confirm('是否确认退出?', '退出提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(that.$route.path);

          this.$store.commit("logoutOn")
          this.$message.info("退出成功")
          that.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          //
        });
      }
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {};
    this.imgUrl = this.user.avatarUrl;
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>

.activeNav{

  .chatgpt-type{
    opacity: 1 !important;
  }
  .block-type{
    opacity: 1 !important;
  }
  i{
    color: #1d90f5 !important;
  }
}

.noopen{
  cursor: pointer;
}

.nav{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  .nav-menu-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .chatgpt-box-periphery{
      width: 100%;
      .chatgpt-box{
        width: 100%;
        height: 90px;
        display: flex;
        margin-bottom: 50px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .chatgpt-type{
          width: 100%;
          height: 100%;
          position: absolute;
          transition: 0.5s;
          background: linear-gradient(to right, rgba(29, 144, 245, 1), rgba(255, 255, 255, 0));
          opacity: 0;
        }
        .chatgpt-box-image{
          img{
            width: 55px;
            height: 55px;
          }
        }
        .chatgpt-box-name{
          color: white;
          font-weight: 800;
        }
        &:hover{
          .chatgpt-type{
            opacity: 1;
          }
        }
      }
    }

    .menu-list{
      width: 100%;
      flex: 0.55;
      // background: rebeccapurple;
      .li-item{
        width: 100%;
        height: 70px;
        margin: 10px 0;
        display: flex;
        //justify-content: space-between;
        .block{
          width: 7%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;


          .block-type{
            width: 100%;
            height: 45%;
            background: #1d90f5;
            border-radius: 0 12px 12px 0;
            transition: 0.5s;
            opacity: 0;
          }

        }
        &:hover{

          .block-type{
            opacity: 1;
          }
        }

        .icon-box{
          width: 80%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
              font-size: 35px;
              color: #74778a;
            }
          }
          &:hover{
              i{
                color: #1d90f5;
              }
          }


        }


      }

    }

  }


  .user{
    position: absolute;
    width: 100%;
    height: 170px;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .user-box{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      .user-box-img{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .user-btn{
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      .outbox{
        width: 50%;
        height: 80%;
        background: #df4b4b;
        display: flex;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
      }
      .creatbox{
        width: 50%;
        height: 80%;
        display: flex;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        background: #69e9ab;
        color: white;
        cursor: pointer;
      }
    }

  }

}
.ul-box{
  margin-top: -100px;
// background: #69e9ab;
}
</style>